<template>
	<view class="home">
		<u-navbar :title="titleData" safeAreaInsetTop fixed placeholder :autoBack="true" bgColor="rgba(0,0,0,0)" ></u-navbar>
		<view class="realtime_i">
			<text>实时雨量</text>
			<text style="color: #ffffff;font-size: 30rpx;">(毫米)</text>

		</view>
		<view class="realtime_top">
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.tr}}
				</view>
				<view class="text">
					<image class="i_img" src="../../../../static/images/timea.png" mode=""></image>
					<view class="">
						今日雨量
					</view>

				</view>
			</view>
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.h24r}}
				</view>
				<view class="text">
					<image class="i_img" src="../../../../static/images/timeb.png" mode=""></image>
					<view class="">
						24h雨量
					</view>

				</view>
			</view>
		</view>
		<view class="realtime_bom">
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.mr}}
				</view>
				<view class="text">
					<image class="i_img" src="../../../../static/images/timef.png" mode=""></image>
					<view class="">
						分钟雨量
					</view>

				</view>
			</view>
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.hr}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timee.png" mode=""></image>
					<view class="">
						小时雨量
					</view>
				</view>
			</view>
		</view>
		<view class="realtime_bom">
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.hs}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timed.png" mode=""></image>
					<view class="">
						最大雨强
					</view>

				</view>
			</view>
			<view class="i_item">
				<view class="num">
					{{thingsModelValue.yr}}
				</view>
				<view class="text">
					<image class="i_img" src="@/static/images/timec.png" mode=""></image>
					<view class="">
						昨日雨量
					</view>

				</view>
			</view>
		</view>
		<view class="realtime_lat">
			<image class="i_img" src="@/static/images/lat.png" mode=""></image>
			<view class="lonlat">
				<view class="lon">
					经度：{{thingsModelValue.lon}}
				</view>
				<view class="lat">
					纬度：{{thingsModelValue.lat}}
				</view>
			</view>
		</view>
		<view class="realtime_lat">
			
			<view class="lonlat">
				<view class="lon">
					上报时间：{{thingsModelValue.TIM}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	export default {
		data() {
			return {
				titleData: '实时数据',
				thingsModelValue: {},
				id: null,
				timer: null
			}
		},
		onUnload() {
			console.log('卸载', this.timer);
			clearInterval(this.timer);

		},
		onLoad(option) {
			this.titleData = option.name
			this.id = option.id
			this.realtimeFn(this.id)
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				console.log('执行', this.timer)
				this.realtimeFn(this.id)
			}, 30000);

		},
		methods: {
			realtimeFn(e) {
				// let now = dayjs();
				// // 今日时间
				// let todayStart = now.subtract(0, 'hour').format('YYYY-MM-DD ') + '00:00:00'
				// let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				uni.$u.http.get('/device/device/getInfoPhone/' + e).then(res => {
					if (res.code == 200) {
						let arr = JSON.parse(res.data.deviceReportedData.logValue)
						console.log('设备信息', arr);
						let obj = {}
						for (let i = 0; i < arr.length; i++) {
							if (arr[i].identifier == 'IMEI') {
								obj.imei = arr[i].value
							}
							if (arr[i].identifier == 'LON') {
								obj.lon = arr[i].value
							}
							if (arr[i].identifier == 'LAT') {
								obj.lat = arr[i].value
							}
							if (arr[i].identifier == 'IM') {
								obj.im = arr[i].value
							}
							if (arr[i].identifier == 'MR') {
								obj.mr = arr[i].value
							}
							if (arr[i].identifier == 'HR') {
								obj.hr = arr[i].value
							}
							if (arr[i].identifier == 'HS') {
								obj.hs = arr[i].value
							}
							if (arr[i].identifier == 'TR') {
								obj.tr = arr[i].value
							}
							if (arr[i].identifier == 'H24R') {
								obj.h24r = arr[i].value
							}
							if (arr[i].identifier == 'YR') {
								obj.yr = arr[i].value
							}
							if (arr[i].identifier == 'TIM') {
								obj.TIM = arr[i].value
							}
						}
						this.thingsModelValue = obj
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {
		padding: 30rpx;

		.realtime_i {
			border-radius: 30rpx;
			border: 10rpx solid #434548;
			background-color: #303338;
			color: #fbed2a;
			padding: 20rpx;
			font-size: 60rpx;
			text-align: center;
		}

		.realtime_top {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.i_item {
				width: 285rpx;
				padding: 20rpx;
				border-radius: 30rpx;
				border: 10rpx solid #434548;
				background-color: #303338;

				.num {
					font-size: 80rpx;
					color: #ffffff;
					text-align: center;
					font-family: 'MyFont';
				}

				.text {
					font-size: 55rpx;
					color: #72fa12;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.i_img {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

		.realtime_bom {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.i_item {
				width: 285rpx;
				padding: 20rpx;
				border-radius: 30rpx;
				border: 10rpx solid #434548;
				background-color: #303338;

				.num {
					font-size: 80rpx;
					color: #ffffff;
					text-align: center;
					font-family: 'MyFont';
				}

				.text {
					font-size: 55rpx;
					color: #0fe9ce;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.i_img {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

		.realtime_lat {
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 30rpx;
			border: 10rpx solid #434548;
			background-color: #303338;
			display: flex;
			align-items: center;

			.i_img {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			.lonlat {
				font-family: 'MyFont';
				color: #0fe9ce;
				font-size: 50rpx;
			}
		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		background-color: #73767a;
	}
</style>